// import Vue from "vue";
import { im } from "mathjs"
import { isFunction, isEmpty } from "../utils/validate"
import _ from "lodash"
// import LemonPopover from "../components/popover.vue"
let popover

const hidePopover = () => {
  if (popover) popover.style.display = "none"
}
const showPopover = () => {
  if (popover) popover.style.display = "block"
}
document.addEventListener("click", (e) => {
  hidePopover()
})
// export default {
//   hide: hidePopover,
//   bind(el, binding, vnode) {
//     el.addEventListener(
//       binding.modifiers.click ? "click" : "contextmenu",
//       (e) => {
//         console.log(el.attributes.data.data)
//         console.log(el.attributes.data1)
//         if (
//           isEmpty(binding.value.operateList) ||
//           !Array.isArray(binding.value.operateList)
//         )
//           return
//         if (binding.modifiers.click) e.stopPropagation()
//         e.preventDefault()
//         let component = binding.value.data
//         let visibleItems = []
//         if (!popover) {
//           popover = document.createElement("div")
//           popover.className = "chat-contextmenu"
//           document.body.appendChild(popover)
//         }
//         popover.innerHTML = binding.value.operateList
//           .map((item) => {
//             let visible
//             if (isFunction(item.visible)) {
//               console.log("执行visible", component)
//               visible = item.visible(component)
//             } else {
//               visible = item.visible === undefined ? true : item.visible
//             }

//             if (visible) {
//               visibleItems.push(item)
//               let icon = ""
//               if (item.icon) {
//                 icon =
//                   item.icon && item.icon.includes("local")
//                     ? `<svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-${item.icon.replace(
//                         "local-",
//                         ""
//                       )}" /></svg>`
//                     : `<i class="icon ${item.icon}"></i>`
//               }
//               // const icon = item.icon ? `<i class="icon ${item.icon}"></i>` : ""
//               return `<div style="color:${item.color}" title="${item.text}" class="item">${icon}<span>${item.text}</span></div>`
//             }
//             return ""
//           })
//           .join("")
//         popover.style.top = `${e.pageY}px`
//         popover.style.left = `${e.pageX}px`

//         popover.childNodes.forEach((node, index) => {
//           const { click, render } = visibleItems[index]
//           node.addEventListener("click", (e) => {
//             e.stopPropagation()
//             if (isFunction(click)) click(e, component, hidePopover)
//           })
//         })

//         showPopover()
//       }
//     )
//   }
// }

export default function (el, binding) {
  el.addEventListener(
    binding.modifiers.click ? "click" : "contextmenu",
    (e) => {
      if (
        isEmpty(binding.value.operateList) ||
        !Array.isArray(binding.value.operateList)
      )
        return
      if (binding.modifiers.click) e.stopPropagation()
      e.preventDefault()
      let component = binding.value.data
      let visibleItems = []
      if (!popover) {
        popover = document.createElement("div")
        popover.className = "chat-contextmenu"
        document.body.appendChild(popover)
      }
      popover.innerHTML = binding.value.operateList
        .map((item) => {
          let visible
          if (isFunction(item.visible)) {
            visible = item.visible(component)
          } else {
            visible = item.visible === undefined ? true : item.visible
          }

          if (visible) {
            visibleItems.push(item)
            let icon = ""
            if (item.icon) {
              icon =
                item.icon && item.icon.includes("local")
                  ? `<svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-${item.icon.replace(
                      "local-",
                      ""
                    )}" /></svg>`
                  : `<i class="icon ${item.icon}"></i>`
            }
            // const icon = item.icon ? `<i class="icon ${item.icon}"></i>` : ""
            return `<div style="color:${item.color}" title="${item.text}" class="item">${icon}<span>${item.text}</span></div>`
          }
          return ""
        })
        .join("")
      popover.style.top = `${e.pageY}px`
      popover.style.left = `${e.pageX}px`
      popover.childNodes.forEach((node, index) => {
        const { click, render } = visibleItems[index]
        node.addEventListener("click", (e) => {
          e.stopPropagation()
          if (isFunction(click)) click(e, component, hidePopover)
        })
      })

      showPopover()
    }
  )
}
